<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a="http://richfaces.org/a4j"
    template="layout/template.xhtml">

<ui:define name="body">

    <h:form id="registerForm">
        
        <rich:panel>
        	<f:facet name="header">Registration</f:facet>
        	
        	<h:panelGrid columns="1">
        	
					<s:decorate id="avatarField" template="layout/edit.xhtml">
                		<ui:define name="label">Avatar</ui:define>
                		<ui:include src="/include/avatar.xhtml" />
            		</s:decorate>
       
       			    <s:decorate id="fileUploadField" template="layout/edit.xhtml"> 	
            			<ui:define name="label" />
            			<rich:fileUpload addControlLabel="Change avatar" stopButtonClass="file-upload-stop-button" addButtonClass="file-upload-button" ajaxSingle="true" maxFilesQuantity="100"
            						     fileUploadListener="#{userPreference.uploadAvatar}" listHeight="0" listWidth="0" 
            				    		 immediateUpload="true" autoclear="true" acceptedTypes="jpg, jpeg, png">
            				<a:support ajaxSingle="true" event="onuploadcomplete" reRender="avatar"/>            		
            			</rich:fileUpload>
            		</s:decorate>
            	<rich:graphValidator>
            	<s:decorate id="usernameField" template="layout/edit.xhtml">
                	<ui:define name="label">Username</ui:define>
                	<h:inputText id="username" required="true" size="32" maxlength="64" value="#{newUser.username}" />
            	</s:decorate>
            	
            	
            	<s:decorate id="passwordField" template="layout/edit.xhtml">
                	<ui:define name="label">Password</ui:define>
                	<h:inputSecret id="password" required="true" size="32" maxlength="256" value="#{registerAction.password}" />
            	</s:decorate>            	
            	
            	<s:decorate id="confirmField" template="layout/edit.xhtml">
                	<ui:define name="label">Confirm Password</ui:define>
                	<h:inputSecret id="confirm" required="true" size="32" maxlength="256" value="#{registerAction.confirm}" />
            	</s:decorate>
            	
            	<s:decorate id="firstnameField" template="layout/edit.xhtml">
                	<ui:define name="label">Firstname</ui:define>
                	<h:inputText id="firstname" size="32" maxlength="64" value="#{newUser.firstname}" />
            	</s:decorate>
            	
            	<s:decorate id="lastnameField" template="layout/edit.xhtml">
                	<ui:define name="label">Lastname</ui:define>
                	<h:inputText id="lastname" size="32" maxlength="64" value="#{newUser.lastname}" />
            	</s:decorate>
            	
            	<s:decorate id="sexField" template="layout/edit.xhtml">
                	<ui:define name="label">Sex</ui:define>
                	<h:panelGrid columns="2">
                		<h:selectOneRadio required="true" id="sex" value="#{newUser.sex}">
                			<f:selectItems value="#{userPreference.sexs}"/>
                			<s:convertEnum />
                		</h:selectOneRadio>
                	</h:panelGrid>
            	</s:decorate>
            	
            	<s:decorate id="birthdateField" template="layout/edit.xhtml">
                	<ui:define name="label">Birthdate</ui:define>
                	<a:outputPanel id="calendar" layout="block">
                		<rich:calendar id="birthdate" value="#{newUser.birthdate}" cellWidth="24px" cellHeight="22px" />                		
                	</a:outputPanel>
            	</s:decorate>
            	
            	<s:decorate id="emailField" template="layout/edit.xhtml">
                	<ui:define name="label">E-mail</ui:define>
                	<h:inputText id="email" required="true" size="32" maxlength="64" value="#{newUser.email}" />
            	</s:decorate>          	
            	
            	<s:decorate id="descriptionField" template="layout/edit.xhtml">
                	<ui:define name="label">Description</ui:define>
                	<h:inputTextarea id="description" cols="50" rows="10" value="#{newUser.dsc}"/>
            	</s:decorate>
				        		
				</rich:graphValidator>
				
				<h:panelGrid columns="3">
					<h:graphicImage value="/seam/resource/captcha" />
					<h:inputText id="captchaInput" value="#{captcha.response}" required="true">
						<s:validate />
					</h:inputText>
					<h:message for="captchaInput" />
				</h:panelGrid>
				
        	</h:panelGrid>    	

        </rich:panel>  
        
        <div class="actionButtons">
        	<h:commandButton id="register" value="Register" action="#{registerAction.register}" />
           	<s:button id="cancelRegister" value="Cancel" propagation="end" view="/home.xhtml" />	
        </div>             

    </h:form>

</ui:define>

</ui:composition>
